<div class="container">
  <div class="jumbotron">
    <h1>LD-VOWL</h1>
    <p>
      Extract ontology information from SPARQL endpoints and display the extracted information in an overview visualization using the
      <a href="http://vowl.visualdataweb.org/v2/" target="_blank">
        VOWL Notation
      </a>
      (with minor modifications).
    </p>
  </div>

  <div class="well">
    <form class="form-horizontal" autocomplete="off" name="endpointForm">
      <div class="form-group">
        <label class="control-label col-sm-2" for="endpoint">Endpoint</label>
        <div class="col-sm-7">
          <input name="url" id="endpoint" ng-model="start.endpoint" type="url" class="form-control"
                 title="SPARQL endpoint URL"
                 uib-typeahead="url for url in start.endpoints | filter:$viewValue | limitTo:8" required
                 ng-minlength="7" typeahead-min-length="0" placeholder="Type in an URL or select one from the list"/>
        </div>
        <div class="col-sm-3">
          <button type="button" class="btn btn-primary" id="showGraph" ng-click="start.showGraph()"
                  ng-disabled="endpointForm.$invalid">
            Visualize &raquo;
          </button>
        </div>
      </div>

      <div class="form-group" ng-if="start.endpointAlert">
        <div class="col-sm-offset-2 col-sm-7">
          <uib-alert  type="info" close="start.closeEndpointAlert()" style="margin-bottom: 0;">
            <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>
            A list of endpoints can be found
            <a class="alert-link" href="http://sparqles.ai.wu.ac.at/availability" target="_blank">here</a>.<br/>
            <small>Endpoint requirements: 1) speaks SPARQL, 2) returns JSON, 3) allows CORS.</small>
          </uib-alert>
        </div>
      </div>

      <div class="form-group" ng-if="start.proxyAvailable">
        <div class="col-sm-offset-2 col-sm-10">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model="start.useLocalProxy" ng-change="start.updateUseLocalProxy()">
              Use local proxy
            </label>
          </div>
        </div>
      </div><!-- end of .form-group -->
    </form><!-- end of .form-horizontal -->
  </div><!-- end of .well -->
</div><!-- end of .container -->
